<!--
 * @Author: likaijie 847094299@qq.com
 * @Date: 2025-04-07 10:09:46
 * @LastEditors: likaijie 847094299@qq.com
 * @LastEditTime: 2025-04-07 11:22:19
 * @Description: 
-->
<template>
  <div class="provider-list-page">
    <div class="card-header">
      <el-button type="primary" @click="fetchProviders">刷新</el-button>
      <el-button type="primary" @click="apiProviderHealthCheck">
        API提供商健康状态
      </el-button>
      <el-button type="primary" @click="adapterHealthCheck">
        适配器的健康检查
      </el-button>
      <el-button type="primary" @click="resetAdapterHealthCheck">
        重置适配器健康状态
      </el-button>
    </div>
    <el-descriptions title="API 提供商摘要信息" :column="6" border>
      <template #extra>
        <el-button type="primary" @click="fetchSummary">查询</el-button>
      </template>
      <el-descriptions-item v-for="it in summaryData" :key="it.key">
        <template #label>
          {{ it.key }}
        </template>
        {{ it.value }}
      </el-descriptions-item>
    </el-descriptions>
    <el-table
      show-overflow-tooltip
      stripe
      border
      :data="providers"
      style="width: 100%"
    >
      <el-table-column prop="code" label="编码" width="160" />
      <el-table-column prop="name" label="提供商名称" width="260" />
      <el-table-column
        prop="healthy"
        label="健康状况"
        :formatter="formatStatus"
        width="120"
      />
      <el-table-column prop="description" label="描述信息" />
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import {
  getAllProviders,
  getProvidersHealthCheck,
  triggerHealthCheck,
  resetHealth,
  getProviderSummary
} from "@/api/adminProvidersApi";

// 根据接口返回数据定义提供商数据类型，可根据实际字段补充
interface Provider {
  code: string;
  name: string;
  healthy: boolean;
  description: string;
}

const summaryData = ref<any[]>([]);

async function fetchSummary() {
  try {
    // 调用 GET /api/admin/providers/summary 接口
    const { success, data, message } = await getProviderSummary();
    if (success) {
      summaryData.value = Object.entries(data).map(([key, value]) => ({
        key,
        value
      }));
    } else {
      ElMessage.error(message || "获取摘要信息失败");
    }
  } catch (error) {
    ElMessage.error("请求摘要信息数据失败");
  }
}
const apiProviderHealthCheck = async () => {
  try {
    const { success, message } = await getProvidersHealthCheck();
    if (success) {
      ElMessage.success("API 提供商健康检查成功");
      fetchProviders();
    } else {
      ElMessage.error(`API 提供商健康检查失败：${message}`);
    }
  } catch (error) {
    ElMessage.error(`API 提供商健康检查失败：${error}`);
  }
};
const adapterHealthCheck = async () => {
  try {
    const { success, message } = await triggerHealthCheck();
    if (success) {
      ElMessage.success("触发适配器健康检查成功");
      fetchProviders();
    } else {
      ElMessage.error(`触发适配器健康检查失败：${message}`);
    }
  } catch (error) {
    ElMessage.error(`触发适配器健康检查失败：${error}`);
  }
};
const resetAdapterHealthCheck = async () => {
  try {
    const { data, success, message } = await resetHealth();
    if (success) {
      ElMessage.success("适配器健康检查重置成功");
      fetchProviders();
    } else {
      ElMessage.error(`适配器健康检查重置失败：${message}`);
    }
  } catch (error) {
    ElMessage.error(`适配器健康检查重置失败：${error}`);
  }
};

const providers = ref<Provider[]>([]);

const formatStatus = (row: Provider) => {
  return row.healthy ? "健康" : "不健康";
};

// 获取 API 提供商列表
async function fetchProviders() {
  try {
    const { data, success, message } = await getAllProviders();
    if (success) {
      providers.value = data.providers;
    } else {
      ElMessage.error(message || "获取API提供商列表失败");
    }
  } catch (error) {
    console.error(error);
    ElMessage.error("请求API提供商列表失败");
  }
}

onMounted(() => {
  fetchProviders();
  fetchSummary();
});
</script>

<style scoped>
.provider-list-page {
  padding: 20px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>
